import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

import { defaultTheme } from '@/config/theme'

import { getConfig, responsiveStorageNameSpace, storageLocal } from '../utils'

export const useEpThemeStore = defineStore('pure-epTheme', () => {
  // state
  const epThemeColor = ref<string>(
    storageLocal().getItem<StorageConfigs>(`${responsiveStorageNameSpace()}layout`)?.epThemeColor ??
      getConfig().EpThemeColor ??
      '',
  )

  const epTheme = ref<string>(
    storageLocal().getItem<StorageConfigs>(`${responsiveStorageNameSpace()}layout`)?.theme ??
      getConfig().Theme ??
      'light',
  )

  // getters
  const getEpThemeColor = computed(() => epThemeColor.value)

  /** 用于mix导航模式下hamburger-svg的fill属性 */
  const fill = computed(() => {
    if (epTheme.value === 'light') {
      return defaultTheme.primary
    } else {
      return '#fff'
    }
  })

  // actions
  function setEpThemeColor(newColor: string): void {
    const layout = storageLocal().getItem<StorageConfigs>(`${responsiveStorageNameSpace()}layout`)
    epTheme.value = layout?.theme ?? epTheme.value
    epThemeColor.value = newColor
    if (!layout) return
    layout.epThemeColor = newColor
    storageLocal().setItem(`${responsiveStorageNameSpace()}layout`, layout)
  }

  return {
    epThemeColor,
    epTheme,
    getEpThemeColor,
    fill,
    setEpThemeColor,
  }
})

export default useEpThemeStore()
